<template>
  <div class="app-container">
    <div class="filter-container">
      <DatePicker
        :query-model="listQuery"
        style="width: 230px"
        @change="handleFilter"
      />
      <el-input
        v-model="listQuery.userName"
        class="filter-item"
        clearable
        placeholder="用户姓名"
        style="width: 150px"
        @keyup.enter.native="handleFilter"
      />

      <el-input
        v-model="listQuery.mobile"
        class="filter-item"
        clearable
        placeholder="用户手机号"
        style="width: 150px"
        @keyup.enter.native="handleFilter"
      />

      <el-cascader
        ref="cascader"
        v-model="listQuery.communityIdArr"
        placeholder="请选择楼宇"
        :options="communityData"
        :props="communityProps"
        :show-all-levels="true"
        clearable
        collapse-tags
        style="width: 310px"
      />
      <el-select
        v-model="listQuery.communityId"
        placeholder="关联设备"
        @change="selectCommunity(listQuery.communityId)"
      >
        <el-option
          v-for="item in communityData"
          :key="item.id"
          :label="item.name"
          :value="item.id"
          :disabled="item.disabled"
        >
        </el-option>
      </el-select>

      <!-- <el-form-item label="功能权限" prop="menuIdList">
          <el-cascader
            ref="cascader"
            v-model="role.menuIdList"
            :options="menuList"
            :props="defaultProps"
            clearable
            collapse-tags
            style="width:310px"
          />
        </el-form-item> -->

      <!-- <el-select v-model="listQuery.communityId" placeholder="关联社区"  @change="selectCommunity(listQuery.communityId)">
      <el-option
       v-for="item in communityData"
       :key="item.id"
       :label="item.name"
       :value="item.id"
       :disabled="item.disabled">
      </el-option>
      </el-select>

   -->

      <el-button
        v-waves
        v-permission="['sys:role:list']"
        type="primary"
        icon="el-icon-search"
        @click="handleFilter"
        >搜索</el-button
      >
    </div>

    <el-table
      :key="tableKey"
      :data="list"
      fit
      highlight-current-row
      style="width: 100%"
    >
      <el-table-column label="用户ID" prop="id" width="70px" align="center" />
      <!-- <el-table-column label="注册时间" prop="registeredAt" align="center" /> -->
      <el-table-column label="用户姓名" prop="userName" align="center" />
      <el-table-column label="用户手机号" prop="mobile" align="center" />

      <el-table-column label="关联社区信息" prop="mobile" align="center" />
      <el-table-column
        label="关联设备"
        prop="mobile"
        width="140px"
        align="center"
      />
      <el-table-column
        label="用户状态"
        prop="statusName"
        width="140px"
        align="center"
      />

      <el-table-column label="操作" align="center" width="500px">
        <template slot-scope="{ row }">
          <el-button
            v-waves
            v-permission="['sys:role:list']"
            type="primary"
            @click="seeDetail(row.id)"
            >查看详情</el-button
          >
          <el-button
            v-waves
            v-permission="['sys:role:save']"
            style="margin-left: 10px"
            type="primary"
            @click="lookUserRecord(row.id)"
            >设备使用记录</el-button
          >
          <el-button
            v-waves
            v-permission="['sys:role:save']"
            style="margin-left: 10px"
            type="primary"
            @click="disable(row.id, row.status)"
            >{{ !row.status ? "启用" : "停用" }}</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="listQuery.pageNo"
      :limit.sync="listQuery.pageSize"
      @pagination="getList"
    />

    <!-- 以下是查看详情新开的窗口 -->
    <el-dialog :title="userDetail" :visible.sync="dialogUserDetailVisible">
      <table width="100%" bgcolor="#ffffff" border="1">
        <tr>
          <td align="center" height="60px">ID</td>
          <td align="center" height="60px">{{ user.id }}</td>
          <td align="center" height="60px">头像</td>
          <td align="center" height="60px">笑脸</td>
          <td align="center" height="60px">昵称</td>
          <td align="center" height="60px">{{ user.userName }}</td>
          <td align="center" height="60px">姓名</td>
          <td align="center" height="60px">{{ user.userName }}</td>
        </tr>
        <tr>
          <td align="center" height="60px">电话</td>
          <td align="center" height="60px">{{ user.mobile }}</td>
          <td align="center" height="60px">性别</td>
          <td align="center" height="60px">{{ getUserSex(user.sex) }}</td>
          <td align="center" height="60px">省份</td>
          <td align="center" height="60px">{{ user.provinceName }}</td>
          <td align="center" height="60px">城市</td>
          <td align="center" height="60px">{{ user.cityName }}</td>
        </tr>

        <tr>
          <td align="center" height="60px">注册时间</td>
          <td align="center" height="60px">{{ user.registeredAt }}</td>
          <td align="center" height="60px">当前状态</td>
          <td align="center" height="60px">{{ user.statusName }}</td>
          <td align="center" height="60px">关联社区</td>
          <td align="center" height="60px">可能多个取哪一个?</td>
          <td align="center" height="60px">-</td>
          <td align="center" height="60px">-</td>
        </tr>

        <tr>
          <td align="center" height="60px">公共设备</td>
          <td align="center" height="60px">{{ user.mobile }}</td>
          <td align="center" height="60px">私有设备</td>
          <td align="center" height="60px">{{ getUserSex(user.sex) }}</td>
          <td align="center" height="60px">-</td>
          <td align="center" height="60px">-</td>
          <td align="center" height="60px">-</td>
          <td align="center" height="60px">-</td>
        </tr>
      </table>
      <br />
      <br />
      <el-form :model="form">
        <div style="line-height: 24px; font-size: 18px; color: #303133">
          登录信息
        </div>
        <el-table :data="gridData" border style="width: 100%; margin-top: 20px">
          <el-table-column prop="date" label="登录时间" align="center">
          </el-table-column>
          <el-table-column prop="name" label="登录渠道" align="center">
          </el-table-column>
        </el-table>
      </el-form>
    </el-dialog>
    <!-- 以上是查看详情新开的窗口 -->

    <!--以下是 查看设备使用记录 窗口 -->
    <el-dialog :title="testTitle" :visible.sync="dialogUseRecordVisible">
      <el-table :data="gridData">
        <el-table-column
          property="date"
          label="时间"
          width="150"
        ></el-table-column>
        <el-table-column
          property="name"
          label="应用设备"
          width="200"
        ></el-table-column>
        <el-table-column property="address" label="操作"></el-table-column>
      </el-table>
    </el-dialog>
    <!--以上是 查看设备使用记录 窗口 -->
  </div>
</template>

<script>
import { getList, disableOrEnable, getDetail } from "@/api/user/user";
import { getCommunityList } from "@/api/community/building/building.js";

import DatePicker from "@/components/DatePickerUser";
import waves from "@/directive/waves"; // Waves directive
export default {
  name: "RoleTable",
  directives: { waves },
  filters: {},
  components: {
    DatePicker,
  },
  data() {
    return {
      testTitle: "",
      xx: "xxxx",
      gridData: [
        {
          date: "20201-03-31",
          name: "王小虎",
          address: "开门",
        },
        {
          date: "2016-05-04",
          name: "胡超雄",
          address: "关门",
        },
      ],
      form: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
      },
      formLabelWidth: "120px",

      //设备使用记录窗口
      dialogUseRecordVisible: false,
      //用户详情窗口
      dialogUserDetailVisible: false,
      userDetail: "用户信息",

      //定义用户状态
      userStatus: {
        id: null,
        status: null,
      },

      //社区数据
      communityData: null,
      communityProps: {
        expandTrigger: "hover",
        emitPath: false,
        children: "children",
        label: "name",
        value: "id",
        multiple: true,
      },
      defaultProps: {
        expandTrigger: "hover",
        emitPath: false,
        children: "children",
        label: "name",
        value: "id",
        multiple: true,
      },
      user: {},

      tableKey: 0,
      list: [],
      total: 0,
      listQuery: {
        pageNo: 1,
        pageSize: 10,
        orderByField: "createdAt",
        orderBy: "desc",
        //社区数据
        //communityId: null,
        buildingId: null,
        communityIdArr: [],

        //
      },

      dialogStatus: "",
      textMap: {
        update: "更新",
        create: "新增",
      },
      role: {
        deptId: null,
        menuIdList: [],
      },

      menuList: [],
      deptList: [],
      deptProps: {
        expandTrigger: "hover",
        checkStrictly: true,
        emitPath: false,
        children: "children",
        label: "name",
        value: "id",
      },
    };
  },
  created() {
    this.getList();
    //加载社区数据
    this.getCommunityList();
  },
  methods: {
    // 获取数据
    getList() {
      if (this.$refs["cascader"] != undefined) {
        var nodes = this.$refs["cascader"].getCheckedNodes();
        for (var i = 0; i < nodes.length; i++) {
          this.listQuery.communityIdArr = Array.from(
            new Set(this.listQuery.communityIdArr.concat(nodes[i].path))
          );
        }
      }
      //    console.log(this.listQuery);
      getList(this.listQuery).then((response) => {
        this.list = response.list;
        this.total = response.totalCount;
      });
    },

    //获取社区数据
    getCommunityList() {
      getCommunityList().then((response) => {
        this.communityData = response;
      });
    },

    //查看设备使用记录
    lookUserRecord(id) {
      this.dialogUseRecordVisible = true;
      getDetail(id).then((response) => {
        // this.user = response;
        this.testTitle =
          "当前用户: " + response.userName + " (ID:" + response.id + ")";
      });
      //当前用户：张佩健（ID：12321313）
    },

    //
    selectCommunity(id) {
      alert("当前ID为:");
    },

    getUserSex(sex) {
      if (sex == 1) {
        return "男";
      } else if (sex == 2) {
        return "女";
      }
    },

    handleFilter() {
      this.listQuery.pageNo = 1;
      this.getList();
    },
    resetTemp() {
      this.$nextTick(() => {
        this.role = {
          deptId: null,
          menuIdList: [],
        };
        this.$refs["dataForm"].clearValidate();
      });
    },

    //查看用户详情
    seeDetail(id) {
      this.dialogUserDetailVisible = true;
      //this.resetTemp();
      getDetail(id).then((response) => {
        this.user = response;
      });
    },

    //禁用停用
    disable(id, status) {
      this.userStatus.id = id;
      this.userStatus.status = status;
      if (status == 0) {
        //变成启用
        this.$confirm("确认恢复该用户？", "", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
        }).then(() => {
          disableOrEnable(this.userStatus).then((response) => {
            this.$notify({
              title: "成功",
              message: "恢复成功",
              type: "success",
              duration: 2000,
            });
            this.getList();
          });
        });
      } else if (status == 1) {
        //变成禁用
        this.$confirm("停用将导致用户无法登陆和使用设备", "", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
        }).then(() => {
          disableOrEnable(this.userStatus).then((response) => {
            this.$notify({
              title: "成功",
              message: "停用成功",
              type: "success",
              duration: 2000,
            });
            this.getList();
          });
        });
      }
    },
    handleDelete(row) {
      this.$confirm("此操作将永久删除该角色, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        del([row.id]).then((response) => {
          this.$notify({
            title: "成功",
            message: "删除成功",
            type: "success",
            duration: 2000,
          });
          this.getList();
          this.getMenuList();
          this.getDeptList();
        });
      });
    },
  },
};
</script>
